<style lang="scss">
  @import "~@/styles/base";

  .page-study {
    min-height: 100vh;
    padding-bottom: rpx(30);
    background-color: $bg-color;
    .week-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: rpx(35);
      padding-right: rpx(35);
      background-color: #e8edf4;
      .week {
        height: rpx(50);
        line-height: rpx(50);
        font-size: rpx(20);
        color: #b1bbc6;
      }
    }
    .weekday-wrap {
      height: rpx(83);
    }
    .day-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: rpx(40);
      padding-right: rpx(40);
      background-color: #fff;
      .day {
        position: relative;
        height: rpx(83);
        line-height: rpx(83);
        color: #404953;
        font-size: rpx(28);
        font-weight: bold;
        &.active {
          color: $main-color;
          &:after {
            content: '';
            @include middle-center-x();
            bottom: 0;
            width: rpx(30);
            height: rpx(6);
            background-color: $main-color;
          }
        }
      }
    }
    .time-list-wrap {
      position: relative;
      margin: rpx(10) auto;
      width: rpx(710);
      height: rpx(605);
      border-radius: rpx(10);
      background-color: #fff;
      .current-day {
        padding-top: rpx(44);
        text-align: center;
        font-size: rpx(34);
        color: #404953;
        font-weight: bold;
      }
      .curve-wrap, .success-wrap {
        position: absolute;
        top: rpx(20);
        img {
          display: block;
          margin-bottom: rpx(5);
          width: rpx(120);
          height: rpx(120);
        }
        text-align: center;
        color: $light-black;
        font-size: rpx(20);
      }
      .curve-wrap {
        left: rpx(35);
      }
      .success-wrap {
        right: rpx(35);
      }
      .draw-canvas {
        position: relative;
        display: block;
        margin-top: rpx(45);
        width: rpx(442);
        height: rpx(442);
        margin-left: auto;
        margin-right: auto;
        .star-wrap {
          @include middle-center-x();
          top: rpx(43);
          .star-list {
            display: flex;
            margin-bottom: rpx(15);
            align-items: center;
            justify-content: center;
            cover-image {
              margin-right: rpx(10);
              width: rpx(29);
              height: rpx(28);
              &:last-child {
                margin-right: 0
              }
            }
          }
          .star-title {
            padding-bottom: rpx(10);
            font-size: rpx(34);
            line-height: rpx(40);
            color: #404953;
            text-align: center;
          }
          .star-desc {
            font-size: rpx(27);
            line-height: rpx(40);
            color: #b1bbc6;
            text-align: center;
          }
        }
        .count-list {
          @include middle-center-x();
          top: rpx(214);
          display: flex;
          align-items: center;
          .count {
            width: rpx(58);
            margin-right: rpx(20);
            &:last-child {
              margin-right: 0;
            }
            cover-image {
              width: rpx(58);
              height: rpx(58);
            }
            .value {
              margin-top: rpx(15);
              font-size: rpx(27);
              font-weight: bold;
              text-align: center;
              color: #30373f;
            }
            .unit {
              margin-top: rpx(10);
              font-size: rpx(18);
              text-align: center;
              color: #b1bbc6;
            }
          }
        }
      }
    }
    .data-list {
      display: flex;
      align-items: center;
      width: rpx(710);
      height: rpx(168);
      background-color: #fff;
      border-radius: rpx(10);
      margin-left: auto;
      margin-right: auto;
      .data {
        flex: 1;
        color: #8c939b;
        font-size: rpx(24);
        line-height: rpx(40);
        text-align: center;
        img {
          display: block;
          margin: rpx(20) auto rpx(5);
          width: rpx(34);
          height: rpx(34);
        }
        .number {
          color: #30373f;
          font-size: rpx(30);
          line-height: rpx(40);
          font-weight: bold;
        }
      }
    }
    .yield-rate-wrap {
      position: relative;
      margin: rpx(15) auto;
      padding-top: rpx(92);
      width: rpx(710);
      height: rpx(290);
      background-color: #5ca3f1;
      border-radius: rpx(10);
      .data-type {
        position: absolute;
        left: rpx(25);
        top: rpx(25);
        height: rpx(46);
        line-height: rpx(46);
        padding-right: rpx(50);
        padding-left: rpx(22);
        font-size: rpx(24);
        text-align: center;
        border: rpx(1) solid #ffffff;
        box-shadow: 0 rpx(3) rpx(9) rgba(92, 163, 241, 0.32);
        border-radius: rpx(23);
        color: #fff;
        .icon {
          @include middle-center-y();
          right: rpx(18);
          width: rpx(11);
          height: rpx(20);
          transform: rotate(-90deg) translate(100%);
        }
      }
      .time-type {
        position: absolute;
        right: rpx(25);
        top: rpx(25);
        display: flex;
        align-items: center;
        border-radius: rpx(23);
        overflow: hidden;
        border: rpx(1) solid #ffffff;
        box-shadow: 0 rpx(3) rpx(9) rgba(92, 163, 241, 0.32);
        .time {
          width: rpx(61);
          height: rpx(46);
          line-height: rpx(46);
          text-align: center;
          color: #fff;
          background-color: $main-color;
          font-size: rpx(22);
          &.active {
            color: $main-color;
            background-color: #fff;
          }
        }
      }
      .yield-rate-canvas {
        margin-right: auto;
        margin-left: auto;
        width: rpx(683);
        height: rpx(190);
      }
    }
  }
</style>
<template>
  <div class="page-study">
    <ul class="week-list">
      <li class="week">周日</li>
      <li class="week">周一</li>
      <li class="week">周二</li>
      <li class="week">周三</li>
      <li class="week">周四</li>
      <li class="week">周五</li>
      <li class="week">周六</li>
    </ul>
    <swiper class="weekday-wrap" :current="29">
      <swiper-item v-for="(weekDays,index) in dayList" :key="index">
        <ul class="day-list">
          <li class="day" :class="{active: weekDay.isSelected}" v-for="(weekDay,subIndex) in weekDays" :key="subIndex">
            {{weekDay.day}}
          </li>
        </ul>
      </swiper-item>
    </swiper>

    <div class="time-list-wrap">
      <div class="current-day">{{currentDay }}</div>
      <div class="curve-wrap">
        <img src="/static/img/study/study_curve_btn.png">
        学习曲线
      </div>
      <div class="success-wrap">
        <img src="/static/img/study/study_success_btn.png">
        学习成就
      </div>
      <canvas id="percentCanvas" class="draw-canvas" canvasId="percentCanvas">
        <cover-view class="star-wrap">
          <cover-view class="star-list">
            <cover-image src="/static/img/study/study_curve_star_ic.png"></cover-image>
            <cover-image src="/static/img/study/study_curve_star_ic.png"></cover-image>
          </cover-view>
          <cover-view class="star-title">你真棒</cover-view>
          <cover-view class="star-desc">继续保持哦</cover-view>
        </cover-view>
        <cover-view class="count-list">
          <cover-view class="count">
            <cover-image src="/static/img/study/study_rw_ic.png"></cover-image>
            <cover-view class="value">{{sumData.rw}}</cover-view>
            <cover-view class="unit">分钟</cover-view>
          </cover-view>
          <cover-view class="count">
            <cover-image src="/static/img/study/study_pad_ic.png"></cover-image>
            <cover-view class="value">{{sumData.pad}}</cover-view>
            <cover-view class="unit">分钟</cover-view>
          </cover-view>
          <cover-view class="count">
            <cover-image src="/static/img/study/study_custom_ic.png"></cover-image>
            <cover-view class="value">{{sumData.custom}}</cover-view>
            <cover-view class="unit">分钟</cover-view>
          </cover-view>
          <cover-view class="count">
            <cover-image src="/static/img/study/study_rest_ic.png"></cover-image>
            <cover-view class="value">{{sumData.rest}}</cover-view>
            <cover-view class="unit">分钟</cover-view>
          </cover-view>
        </cover-view>
      </canvas>
    </div>
    <ul class="data-list">
      <li class="data">
        <img src="/static/img/study/study_Reach_ic.png">
        护眼保护率
        <div class="number">82%</div>
      </li>
      <li class="data">
        <img src="/static/img/study/study_Reach_ic.png">
        学习效率达成率
        <div class="number">82%</div>
      </li>
      <li class="data">
        <img src="/static/img/study/study_failure_ic.png">
        用眼疲劳等级
        <div class="number">1</div>
      </li>
    </ul>
    <div class="yield-rate-wrap">
      <div class="data-type">
        效率达成率
        <img class="icon" src="/static/img/study/study_arrow_left_ic.png">
      </div>
      <ul class="time-type">
        <li class="time active">周</li>
        <li class="time">月</li>
      </ul>
      <m-echarts className="yield-rate-canvas" :echarts="echarts" :onInit="initYieldRateCanvas" canvasId="yieldRateCanvas"/>
    </div>
  </div>
</template>

<script>
  import timeFormat from "utils/time-format";
  import * as echarts from "utils/echarts";
  import WxCanvas from "utils/wx-canvas";
  import mEcharts from "components/echarts";

  export default {
    data() {
      return {
        echarts,
        dayList: [],
        currentDate: null,
        sumData: {
          rw: 112,
          pad: 32,
          custom: 10,
          rest: 432
        }
      };
    },
    computed: {
      currentDay() {
        return this.currentDate && timeFormat.fetch(this.currentDate.getTime(), "{YYYY}-{MM}-{DD}");
      }
    },
    components: {
      mEcharts
    },
    methods: {
      initYieldRateCanvas(canvas, width, height) {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(chart);
        this.yieldRateCanvas = chart;
        this.setYieldRateData();
        return chart;
      },
      setYieldRateData(){
        const options = {
          color: [ '#ffffff' ],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '2%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [ '1', '2', '3', '4', '5', '6', '7' ],
              axisLine: {
                lineStyle: {
                  type: "solid",
                  color: "#ffffff"
                }
              },
              axisTick: {
                show: false,
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              show: false,
              splitLine: {
                show: false
              },
              axisTick: {
                show: false,
              }
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: App.systemInfo.screenWidth / 750 * 20 + 'px',
              data: [ 10, 20, 30, 10, 40, 50, 30 ]
            }
          ]
        }
        this.yieldRateCanvas.setOption(options);
      },
      async initPercentCanvas() {
        const canvasId = "percentCanvas";
        const canvas = new WxCanvas(wx.createCanvasContext(canvasId), canvasId);
        this.echarts.setCanvasCreator(() => canvas);
        const res = await new Promise(resolve => {
          wx.createSelectorQuery().select(`#${canvasId}`).boundingClientRect((res) => {
            resolve(res);
          }).exec();
        });
        if (!res) {
          setTimeout(() => {
            this.initPercentCanvas();
          }, 1000);
          return false;
        }
        const chart = echarts.init(canvas, null, {
          width: res.width,
          height: res.height
        });
        canvas.setChart(chart);
        this.percentCharts = chart;
        this.setPercentData();
      },
      setPercentData() {
        const sumData = _.cloneDeep(this.sumData)
        let total = 0;
        Object.keys(sumData).forEach(key => {
          total += sumData[ key ];
        });
        const whiteWidth = Math.floor(total * 20 / (442 * Math.PI));
        const unitWidth = Math.ceil(total / 48);
        const borderWidth = unitWidth / 20;
        const allDataList = [];
        let rwCount = sumData.rw / unitWidth;
        for (let i = 0; i < rwCount; i++) {
          allDataList.push({
            value: unitWidth,
            color: "#5ca3f1"
          });
        }
        let remainder = sumData.rw % unitWidth;
        if (remainder !== 0) {
          allDataList.push({
            value: remainder,
            color: "#5ca3f1"
          });
          allDataList.push({
            value: unitWidth - remainder,
            color: "#b4e185"
          })
          sumData.pad -= (unitWidth - remainder);
        }
        for (let i = 0; i < sumData.pad / unitWidth; i++) {
          allDataList.push({
            value: unitWidth,
            color: "#b4e185"
          });
        }
        remainder = sumData.pad % unitWidth;
        if (remainder !== 0) {
          allDataList.push({
            value: remainder,
            color: "#b4e185"
          });
          allDataList.push({
            value: unitWidth - remainder,
            color: "#ffad6b"
          });
          sumData.custom -= (unitWidth - remainder);
        }
        for (let i = 0; i < sumData.custom / unitWidth; i++) {
          allDataList.push({
            value: unitWidth,
            color: "#ffad6b"
          });
        }
        remainder = sumData.custom % unitWidth;
        if (remainder !== 0) {
          allDataList.push({
            value: remainder,
            color: "#ffad6b"
          });
          allDataList.push({
            value: unitWidth - remainder,
            color: "#ffad6b"
          });
          sumData.rest -= (unitWidth - remainder);
        }
        for (let i = 0; i < sumData.rest / unitWidth; i++) {
          allDataList.push({
            value: unitWidth,
            color: "#ffdd3f"
          });
        }
        const dataList = [];
        let sumValue = 0, currentIndex = 0;
        allDataList.forEach(data => {
          sumValue += data.value;
          const index = Math.floor(sumValue / unitWidth);
          if (index % 4 === 0 && currentIndex !== index) {
            currentIndex = index;
            dataList.push({
              value: data.value,
              name: "",
              itemStyle: {
                normal: {
                  color: data.color,
                }
              }
            });
            dataList.push({
              value: whiteWidth,
              name: "",
              itemStyle: {
                normal: {
                  color: '#ffffff',
                }
              }
            });
          }else{
            dataList.push({
              value: data.value,
              name: "",
              itemStyle: {
                normal: {
                  color: data.color,
                }
              }
            });
            dataList.push({
              value: borderWidth,
              name: "",
              itemStyle: {
                normal: {
                  color: '#ffffff',
                }
              }
            });
          }
        });
        const options = {
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          toolbox: {
            show: false
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              startAngle: "0",
              radius: [ "92%", "100%" ],
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: dataList
            }
          ]
        };
        this.percentCharts.setOption(options);
      }
    },
    async onLoad() {
      const currentList = [];
      const startDate = new Date();
      const currentDate = new Date();
      currentDate.setDate(currentDate.getDate() - 1);
      this.currentDate = currentDate;
      startDate.setDate(startDate.getDate() - startDate.getDay());
      for (let i = 0; i < 7; i++) {
        const date = new Date();
        date.setTime(startDate.getTime());
        date.setDate(date.getDate() + i);
        currentList.push({
          day: date.getDate(),
          date: date,
          isSelected: currentDate.getDate() === date.getDate()
        });
      }
      const dayList = [ currentList ];
      for (let i = 1; i < 30; i++) {
        const tempList = _.cloneDeep(currentList);
        tempList.forEach(temp => {
          temp.date.setDate(temp.date.getDate() - i * 7);
          temp.day = temp.date.getDate();
          temp.isSelected = false;
        });
        dayList.unshift(tempList);
      }
      for (let i = 1; i < 30; i++) {
        const tempList = _.cloneDeep(currentList);
        tempList.forEach(temp => {
          temp.date.setDate(temp.date.getDate() + i * 7);
          temp.day = temp.date.getDate();
          temp.isSelected = false;
        });
        dayList.push(tempList);
      }
      this.dayList = dayList;
      this.$nextTick(() => {
        this.initPercentCanvas();
      });
    }
  };
</script>
